window.mfUploaderData = {};

(function ($) {
    $.fn.mfUploader = function(options) { //定义插件的名称，这里为userCp
        var dft = {
            //以下为该插件的属性及其默认值
            name: "", //表单name
            accept:{}, //文件上传条件
            fileNumLimit:9,//上传数量
            formData:{}
        };

        var ops = $.extend(dft,options);
        var $list =  $(ops.list);
        var uploadQuery = "";
        if (ops.formData.type == "video" || ops.formData.type == "audio") {
            uploadQuery = "?type=" + ops.formData.type;
        }
        // 初始化Web Uploader
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // 文件接收服务端。
            server: '/apply/upload/'+window.parameter.vote_id+uploadQuery,
            //server: 'http://yanshiscms.sobeycloud.com/scms//api/revelation/uploadImg?noLogin=false&TenantID=default&userName=666&nickName=1111&uid=11&token=22',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                id: this.selector,
                multiple: false
            },
            fileVal:'upfile',
            formData:ops.formData,
            // 只允许选择图片文件。
            accept:ops.accept,
            fileNumLimit:ops.fileNumLimit
        });

        $(this).find('.webuploader-pick').html('+')

        uploader.on( 'error', function( type ){
            var msg = '';
            if(type == 'Q_EXCEED_NUM_LIMIT'){
                msg='已超过上传数量上限';
            }else if(type == 'Q_EXCEED_SIZE_LIMIT'){
                msg='文件过大';
            }else if(type == 'Q_TYPE_DENIED'){
                msg='请传入规定的文件类型';
            }else{
                msg='请勿传入同一文件';
            }

            layer.open({
                skin: 'msg'
                ,time: 5 //2秒后自动关闭'
                ,content: msg
            });
            return false;
        });

        // 缩略图大小
        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ){
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<i class="delBtn"  style="display:none;" id="delBtn_'+file.id+'">x</i>'+
                    '<i class="cancelBtn" id="cancelBtn_'+file.id+'">x</i>'+
                    '</div>'
                ),
                $img = $li.find('img');

            // $list为容器jQuery实例
            $list.append( $li );
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 80 x 80
            if(file.type.indexOf('image') != -1){
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>文件不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, this.options.accept.thumbnailWidth, this.options.accept.thumbnailHeight );
            }else if(file.type.indexOf('video') != -1){
                $img.attr('src','./img/defVideo.png');
            }else if(file.type.indexOf('audio') != -1){
                $img.attr('src','./img/defAudio.png');
            }

            $li.on('click', '.cancelBtn', function() {
                uploader.removeFile( file,true);
                $(this).parent('div').remove();
            })

            $li.on('click', '.delBtn', function() {
                $(this).parent('div').remove();
                $.each(window.mfUploaderData[ops.name] ,function(i,key){
                    if(key.id == file.id){
                        if(window.mfUploaderData[ops.name].length == 1){
                            delete  window.mfUploaderData[ops.name];
                        }else{
                            window.mfUploaderData[ops.name].splice(i,1);
                        }
                        uploader.removeFile( file,true);
                        return false;
                    }
                })
            })


        });


        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progressWrap');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progressWrap"><p class="progress"><span class="progressStatus"></span></p><span class="progressNum"> </span></div>')
                    .appendTo( $li );
            }
            var percentage
            if(percentage>0.99){
                percentage = '99%';
            }else{
                percentage = (percentage * 100).toFixed(2) + '%';
            }
            $percent.find('.progressStatus').css('width', percentage);
            $percent.find('.progressNum').html(percentage);

        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }
            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete',function(file,response) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progressWrap');
            $percent.find('.progressStatus').css('width', '100%');
            $percent.find('.progressNum').html('100%');
            $( '#'+file.id ).find('.progressWrap').fadeOut();
            $('#cancelBtn_'+file.id).hide();
            $('#delBtn_'+file.id).show();
        });
        //得到后台返回数据
        uploader.on('uploadAccept',function(file,response) {
            if(response.code == 200){
                !window.mfUploaderData[ops.name] ? window.mfUploaderData[ops.name] = [{id:file.file.id,src:response.data}] : window.mfUploaderData[ops.name].push({id:file.file.id,src:response.data});
            }else{
                layer.open({
                    skin: 'msg'
                    ,time: 5 //2秒后自动关闭
                    ,content: response.message
                });
            }

        });

    }
})(jQuery);




